/* CSS Document */

		body{color:#222;-webkit-text-size-adjust:none;}
		body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
		h1,h2,h3,h4,h5,h6{font-size:100%;}
		body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,sans-self;font-size:62.5%; line-height:1.5;}
		ol,ul{list-style:none;}
		
		html,body{ width:100%; height:100%; overflow:hidden;}
		.section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
		.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
		.section-wrap .section .title{width:100%;position:absolute;top: 35%;color:#fff;font-size:2.4em;text-align:center;}
		.section-wrap .section .title p{ padding:0 4%;opacity:0}
		.section-wrap .section .title.active .tit{ opacity:1;/*transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);*/}
		.section-wrap .section-1{ background-color:#337ab7}
		.section-wrap .section-2{ background-color:#5cb85c}
		.section-wrap .section-3{ background-color:#5bc0de}
		.section-wrap .section-4{ background-color:#f0ad4e}
		.section-wrap .section-5{ background-color:#d9534f}
		.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}
		.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
		.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
		.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
		.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
		.section-btn{ width:14px;position:fixed;right:20px;top:50%;}
		.section-btn li{w;width: 12px;x;height: 12px;x;ursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px;ba;background: #fff;gn:center;color:#fff;onsor:pointer;}
		.section-btn li.on{background: #443399;}
		.arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}
		.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}
		@keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
		@-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }

.section-wrap  div.section{background-size: 100% 100%;}
.section.section-1{background: url(../img/banner001.jpg) no-repeat;}
.section.section-2{background: url(../img/banner002.jpg) no-repeat;}
.section.section-3{background: url(../img/banner003.jpg) no-repeat;}
.section.section-4{background: url(../img/banner004.jpg) no-repeat;}
.section.section-5{background: url(../img/banner005.jpg) no-repeat;}
.section.section-6{background: url(../img/banner006.jpg) no-repeat;}

div.arrow{border-radius: 0;width: 50px;background: url(/images/mouse_masker.png) no-repeat;-webkit-transform: rotate(0deg);border: none;height: 64px;font-size: 0px;}

section.section-wrap .section .title:after{content:"";width: 103.3%;height: 108%;background: none;border: solid rgba(106,164,230,0.8) 2px;margin: -5% -2% -2% -1.6%;display: block;position: static;margin-top: -276px;}
section.section-wrap .section .title{left: 100px;width: 620px;margin: 0;background: rgba(106,164,230,0.8);height: 330px; z-index: 9;}
section.section-wrap .section:nth-child(even) .title{left:auto; right:100px;}
.section-wrap .section .title.active .tit{transform: translateY(0px);-webkit-transform: translateY(0px);padding: 42px 42px 8px 42px;text-align: left;font-size: 32px;}
.section-wrap .section .title.active .inf{
    font-size: 16px;
    display: block;
    opacity: 1;
    text-align: left;
    padding: 8px 42px 8px 42px;
    line-height: 32px;
    max-height: 108px;
    overflow: hidden;
}
.section-wrap .section .title.active .more{
    opacity: 1;
    text-align: left;
    padding: 16px 42px 8px 42px;
    line-height: 32px;
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
}
.section-wrap .section .title.active .tit{}
		.section-wrap .section .title p a{color:#fff;display: block;position: relative;width: 116px;height: 32px;line-height: 32px;border: solid #fff 1px;padding: 0 10px;}
		.section-wrap .section .title p a:after{content:"";width: 10px;height: 10px;border-right:1px solid #fff;border-top:1px solid #fff;display: block;position: absolute;transform: rotate(45deg);-webkit-transform: rotate(45deg);top: 10px;right: 10px;}
.section-wrap .section .title p a:before{content:"";width: 38px;display: block;position: absolute;top: 15px;height: 1px;background: #fff;right: 9px;}
		.section-wrap .section .title p a:hover{background:#439;border:solid #439 1px;}



@media only screen and (max-width:769px){
.section-wrap  div.section{background-size: 200% 100%; background-position:40% 0;}
section.section-wrap .section:nth-child(even) .title {
    left: 50%;
    right: auto;
}
section.section-wrap .section .title{margin: 0 0 0 -50% !important;width: 100% !important;top: auto;bottom: 120px;background: none;}
.section-wrap .section .title.active .tit {font-size: 24px;
    padding: 10px 0;}
.section-wrap .section .title.active .more {font-size: 16px;
    padding: 10px 0;}
section.section-wrap .section .title{left: 50%; height: auto; padding:0 30px 70%; z-index: 9;}
.section-wrap .section .title.active .inf {
    font-size: 14px;
    line-height: 24px;
    display: block;
    opacity: 1;
    text-align: left;
    padding: 0;
    max-height:inherit;
}
.more a {
    font-size: 16px;
    border:none !important;
    padding:0 !important;
}
}